<template>
  <u-popup
    mode="bottom"
    v-model="showCanle"
    :closeable="true"
    :mask-close-able="false"
    @close="onClose"
    border-radius="14"
  >
    <view class="goods-card">
      <view class="title">订单取消</view>
      <view class="titleText">请选择取消订单原因</view>
      <view>
        <u-radio-group v-model="value" @change="radioGroupChange">
          <u-radio
            style="display: flex"
            @change="radioChange"
            v-for="(item, index) in list"
            :key="index"
            :name="item.name"
            :disabled="item.disabled"
          >
            {{ item.name }}
          </u-radio>
        </u-radio-group>
      </view>
      <view class="btnBox">
        <view class="btn" @click="onClose">暂不取消</view>
        <view class="btn" @click="submit">确定取消</view>
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  name: 'payment',
  props: {
    showCanle: {
      type: Boolean,
      default: () => false
    },
  },
  computed: {},
  data() {
    return {
      value: '价格有点贵',
      list: [
        {
          name: '价格有点贵',
          disabled: false
        },
        {
          name: '规格/数量拍错了',
          disabled: false
        },
        {
          name: '收货地址拍错了',
          disabled: false
        },
        {
          name: '暂时不需要了',
          disabled: false
        },
        {
          name: '其他',
          disabled: false
        }
      ]
    }
  },

  watch: {},
  methods: {
    radioChange(e) {},
    radioGroupChange(e) {},
    goodSub() {},
    onClose() {
      this.$emit('close')
    },
    submit() {
        this.$emit('submit', this.value)
    }
  }
}
</script>
<style lang="scss" scoped>
.goods-card {
  padding: 30rpx 70rpx;
  background: #fff;
}
.title {
  text-align: center;
  font-size: 30rpx;
}
.titleText {
  font-size: 28rpx;
  color: #999999;
  margin-top: 20rpx;
  margin-bottom: 10rpx;
}

.btn {
  width: 35%;
  height: 66rpx;
  line-height: 60rpx;
  text-align: center;
  color: #fff;
  background: linear-gradient(129deg, #f79128 0%, #fe6507 100%);
  border-radius: 10rpx;
}
.btnBox {
  margin-top: 40rpx;
  display: flex;
  justify-content: space-between;
  .btn:nth-child(1) {
    margin-left: 10%;
    margin-right: 2.5%;
  }
  .btn:nth-child(2) {
    // margin-left: 2.5%;
    margin-right: 10%;
  }
}
</style>